<template>
    <div class="content-box">
        <!-- 搜索地址 -->
        <div class="search-container">
            <div class="input-container">
                <el-form :model="myForm" ref="myForm" label-width="85px" class="my-el-form">
                    <el-form-item label="车场名称：" prop="parkValue">
                        <el-input v-model="myForm.parkValue" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="运营状态：" prop="selectValue">
                        <el-select v-model="myForm.selectValue" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <div class="button-container">
                <el-button @click="handleReset('myForm')">重置</el-button>
                <el-button type="primary" @click="handleSearch">查询</el-button>
                <el-button type="primary" @click="handAdd">+ 新增</el-button>
            </div>
        </div>
        <!-- 展示表格 -->
        <div class="container">
            <div class="table-container">
                <el-table ref="Table1" :data="list" style="width: 100%" border>
                    <el-table-column label="车场名称" align="center">
                        <template slot-scope="scope">{{ scope.row.userName }}</template>
                    </el-table-column>
                    <el-table-column label="车场地址" align="center">
                        <template slot-scope="scope">{{ scope.row.sex }}</template>
                    </el-table-column>
                    <el-table-column label="联系人" align="center">
                        <template slot-scope="scope">{{ scope.row.age }}</template>
                    </el-table-column>
                    <el-table-column label="联系电话" align="center">
                        <template slot-scope="scope">{{ scope.row.nation }}</template>
                    </el-table-column>
                    <el-table-column label="更新时间" align="center">
                        <template slot-scope="scope">{{ scope.row.education }}</template>
                    </el-table-column>
                    <el-table-column label="操作人" align="center">
                        <template slot-scope="scope">{{ scope.row.education }}</template>
                    </el-table-column>
                    <el-table-column label="运营状态" align="center">
                        <template slot-scope="scope">{{ scope.row.education }}</template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" fixed="right">
                        <template slot-scope="scope">
                            <el-button type="text" @click="handleUpdate(scope.$index, scope.row)">编辑</el-button>
                            <el-button type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <div class="pagination-area">
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    layout="total, sizes, prev, pager, next, jumper"
                    :current-page.sync="listQuery.pageNum"
                    :page-size="listQuery.pageSize"
                    :page-sizes="[10, 20, 50]"
                    :total="total"
                >
                </el-pagination>
            </div>
        </div>

        <!-- 新增弹框 -->
        <el-dialog title="车场信息" :visible.sync="dialogFormVisible" width="600px">
            <el-form :model="modalForm">
                <el-form-item label="车场名称" :label-width="formLabelWidth">
                    <el-input v-model="modalForm.parkname" autocomplete="off" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="车场地址" :label-width="formLabelWidth">
                    <el-input v-model="modalForm.parksite" autocomplete="off" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="联系人" :label-width="formLabelWidth">
                    <el-input v-model="modalForm.parkPersong" autocomplete="off" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="联系电话" :label-width="formLabelWidth">
                    <el-input v-model="modalForm.parkPersong" autocomplete="off" placeholder="请输入"></el-input>
                </el-form-item>
                <!-- <el-form-item label="车场地址">
                    <el-select v-model="modalForm.region" placeholder="请选择活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item> -->
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { testApi } from '@/api/test';

const defaultListQuery = {
    pageNum: 1,
    pageSize: 10,
    keyword: ''
};

export default {
    data() {
        return {
            listQuery: Object.assign({}, defaultListQuery),
            list: [],
            total: 0,
            listLoading: true,
            selectedList: [],
            options: [
                {
                    value: 'TO_BE_BUILD',
                    label: '待建'
                },
                {
                    value: 'BUILDING',
                    label: '施工'
                },
                {
                    value: 'OPERATE',
                    label: '运营'
                },
                {
                    value: 'FAULT',
                    label: '故障'
                },
                {
                    value: 'TEAR_DOWN',
                    label: '关闭'
                }
            ],
            myForm: {
                parkValue: '',
                selectValue: ''
            },
            dialogFormVisible:false,//新增弹框
            modalForm:{
              parkname:''
            },
              formLabelWidth: '100px'
        };
    },
    created() {
        this.getList();
    },
    methods: {
        // handleResetSearch() {   // 重置搜索和列表
        //   this.listQuery = Object.assign({}, defaultListQuery);  // 清空输入框内容
        //   this.getList();  // 刷新列表并初始化
        // },
        // handleSearchList() {  // 查询搜索
        //   this.listQuery.pageNum = 1;
        //   this.getList();
        // },
        handleSearch() {
            //搜索;
            console.log(this.form);
        },
        handAdd() {
            //新增
            this.dialogFormVisible = true;
            console.log(111);
        },
        handleReset(formName) {
            //重置选项
            this.$refs[formName].resetFields();
        },
        handleSizeChange(val) {
            // 改变列表显示条数
            this.listQuery.pageNum = 1;
            this.listQuery.pageSize = val;
            this.getList();
        },
        handleCurrentChange(val) {
            // 改变列表显示页数
            this.listQuery.pageNum = val;
            this.getList();
        },

        getList() {
            // 获取数据列表
            this.listLoading = true;
            testApi(this.listQuery)
                .then((res) => {
                    this.listLoading = false;
                    this.list = res.data.list;
                    this.total = res.data.total;
                })
                .catch((err) => {
                    this.listLoading = false;
                });
        }
    }
};
</script>
